<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警日报</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'预警事件流程'" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-back">
          <el-row>
            <el-button size="mini" @click="AddFh">返回</el-button>
          </el-row>
        </div>
        <div class="EmergencyDetail-titel">
          <!-- <div class="InformationDetail-btn">
            <el-row>
              <el-button size="mini" @click="AddFh">返回</el-button>
            </el-row>
          </div> -->
          <div class="EmergencyDetail-top">
            <div>{{ form.warningNoticeName}}</div>
            <div>{{ form.dailyNames}}</div>
          </div>
        </div>
        <div class="InformationDetail-btns">
          <div class="information_Sources_content">
            <div class="task_distribution">
              <div>{{ form.creatorDeptName }}</div>
              <div>{{ form.createTime }}</div>
            </div>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16 fontWeight">总体情况:</div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div>{{ form.overallSituation }}</div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize18 fontWeight">采取措施情况:</div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div>{{ form.measureSituation }}</div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize18 fontWeight">下一步工作安排及建议:</div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div>{{ form.nextWorkPlan }}</div>
                </div>
                <div class="task_distribution">
                  <div>{{ form.workSuggest }}</div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize18 fontWeight">附表1-预警响应跟踪表</div>
              </div>
              <el-table border :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' ,fontWeight:'bold',fontSize:'18px' }" ref="table" max-height="300px" :data="resourcesVoList" tooltip-effect="dark" style="width: 100%" size="medium" :cell-style="{fontSize:'16px'}">
                <el-table-column type="index" label="序号" align="center" width="90px">
                </el-table-column>
                <el-table-column prop="department" label="单位" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column label="投入力量" show-overflow-tooltip align="center">
                  <el-table-column prop="memberTotality" label="人员(人次)" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleTotality" label="车辆(台次)" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="equipTotality" label="发电车（台次）" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="teamTotality" label="发电机（台次）" show-overflow-tooltip align="center">
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { getByIdApi, getLeftFlowApi } from "@/api/EarlyWarningManagement/yjrb";
import { tableData } from "./config";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],
      activities: [],
      tableData1: tableData,
      form: {
      },
      resourcesVoList: []// 投入力量
    };
  },
  created() {
    const { id } = this.$route.query;
    this.getById(id);
    // this.getPutData(id)
  },
  methods: {
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    },
    getById(id) {
      getByIdApi({ id }).then(res => {
        this.form = res;
        this.getWarningLeftFlow(res.infoId);
        this.resourcesVoList = res.resourcesVoList;
        console.log(typeof (this.form.dailyName));
        console.log("getById", res);
      });
    },
    async getWarningLeftFlow(infoId) {
      try {
        const res = await getLeftFlowApi({ infoId });
        this.activities = res;
      } catch (error) {
        console.log(error);
      }
    }
    // 获取预警投入力量
    // getPutData(id) {
    //   getPutDataApi({ id }).then(res => {
    //     this.resourcesVoList = res
    //     console.log("投入力量", res)
    //   })
    // }
  }
};
</script>

<style scoped lang="less">
:deep(.el-collapse-item__header.is-active) {
  border-bottom-color: #ebeef5;
}

:deep(.el-collapse-item__wrap) {
  border-block-color: transparent;
}
:deep(.el-icon-arrow-right:before) {
  content: "\00AB";
  color: blue;
  font-size: 28px;
}

.EmergencyDetail {
  width: 100%;
  height: 100%;

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;

      // padding: 0 10px;
      .EmergencyDetail-back {
        height: 50px;
        border-bottom: 1px solid #d9d9d9;
        .el-button {
          position: absolute;
          right: 15px;
          top: 10px;
        }
      }

      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        position: relative;
        padding: 20px 0;

        .EmergencyDetail-top {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          font-family: 微软雅黑;
          font-weight: bold;
          font-style: normal;
          font-size: 28px !important;
        }

        /* .InformationDetail-btn {
          position: absolute;
          right: 5px;
          bottom: 5px;
          //top: 5px;
          text-align: right;
        } */
      }

      .InformationDetail-btns {
        width: 98%;
        padding: 10px 0;
        margin: 0 auto;
        border-bottom: solid 2px red;

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 10px;
        }
      }

      .EmergencyDetail-zt {
        width: 98%;
        height: 70%;
        overflow-y: auto;
        margin: 0 auto;

        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }

        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .leftLine {
          width: 6px;
          height: 20px;
          background: #236dfe;
          border-radius: 4px;
          margin: auto 8px auto 0;
        }

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 30px 20px 30px;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
